<template>
  <div class="echartsBox">
    <div class="ecahrts-left" ref="ecahrtsLeft">
      <div :class="['left-item', v.label == 2 ? 'more' : '']" v-for="(v, i) in leftMenu" :key="i">
        <span class="v-l">{{ v.label }}</span>
      </div>
      <div class="X-box">
        <div class="X-box-item" v-for="(v, i) in XData" :key="i">
          <!-- 'item-ingress-end' -->
          <div :class="['item-ingress']" v-if="v.value>=120"  :style="{ bottom: `${getPositionHeight(v)[0]}px` }">
            <el-icon size="24">
              <SuccessFilled color="#13CD5E" v-if="v.status == 1" />
              <CircleCloseFilled color="#E52121" v-if="v.status == 2" />
            </el-icon>
            <div class="item-value">{{ forMatTim(v.value) }}</div>
            <img src="~@/static/v3.png" v-if="v.value>270"  class="item-progess" />
            <div :class="[v.value>270?'projess-value':'projess-value-height']" v-if="v.value>150"  :style="{ height: `${getPositionHeight(v)[1]}px`, }"">
            </div>
          </div>
          <div :class="['item-ingress-end']" v-else :style="{ bottom: `${getPositionHeight(v)[0]}px` }">
            <div :class="['projess-value-height-c']" v-if="forMatTim(v.value)>0&&forMatTim(v.value)<1.5"  :style="{ height: `${getPositionHeight(v)[1]}px`, }""></div>
            <div class="item-value">{{ forMatTim(v.value) }}</div>
            <el-icon size="24">
              <SuccessFilled color="#13CD5E" v-if="v.status == 1" />
              <CircleCloseFilled color="#E52121" v-if="v.status == 2" />
            </el-icon>
            </div>
            <div class="v-avaf" :style="{bottom:`${getAvatr(v)}px`}">
              <div class="v-lable" v-if="XData.length-1==i">测试数据</div>
             </div>
          <div class="item-nums">{{ i+1}}</div>
          </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import { ref } from 'vue'
const ecahrtsLeft = ref()
const leftMenu = [{ key: 0, label: "0" }, { key: 1, label: "0.5" },
{ key: 2, label: "1" }, { key: 3, label: "1.5" },
{ key: 4, label: "2" }, { key: 5, label: '2.5' }, { key: 6, label: '3' }, { key: 7, label: '3.5' }, { key: 8, label: '4' }, { key: 9, label: '4.5' }].sort((a, b) => {
  return b.key - a.key
})

const XData = [
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值0,//平均值
    value: 300//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值0,//平均值
    value: 90,//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值50,//平均值
    value: 20,//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值70,//平均值
    value: 45,//个人分数
  }
  , {
    index: 0,
    status: 2,
    avaValue: 50,//平均值0,//平均值
    value: 160,//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值100,//平均值
    value: 0,//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值0,//平均值
    value: 70,//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值130,//平均值
    value: 165,//个人分数
  },
  {
    index: 0,
    status: 1,
    avaValue: 50,//平均值0,//平均值
    value: 200,//个人分数
  },
  {
    index: 0,
    status: 2,
    avaValue: 50,//平均值200,//平均值
    value: 138,//个人分数
  },
  {
    index: 0,
    status: 2,
    avaValue: 50,//平均值25,//平均值
    value: 45,//个人分数
  },
  {
    index: 0,
    status: 2,
    avaValue: 50,//平均值0,//平均值
    value: 60,//个人分数
  },
  {
    index: 0,
    status: 2,
    avaValue: 50,//平均值88,//平均值
    value: 30,//个人分数
  },
]
const getAvatr=(data)=>{
  if (ecahrtsLeft.value) {
    let totalHeight = ecahrtsLeft.value.clientHeight;
  let sumHeight=21;
  let radio=(totalHeight-sumHeight)/270;
  return data.avaValue?data.avaValue*radio+2+6:37;;
  }

}

const getPositionHeight = (v) => {
  //34外边距43.6是符号高度加数字高度
  if (ecahrtsLeft.value) {
    let totalHeight = ecahrtsLeft.value.clientHeight;
    let sumHeight=21;
    let avatData=(totalHeight-sumHeight);
    if (v.value >= 120) {
      if (v.value > 270) {
        return [avatData,(avatData/2)]
      }else if(v.value>=120&&v.value<270){
        let radio=(avatData/2)/150;
        return [radio*v.value ,v.value>=150?Math.abs((avatData/2)-radio*v.value):0]
      }
    } else {
      let bottomHeight=34*4;
      let radio=(bottomHeight/120);     
      return [radio*v.value+24,bottomHeight-radio*v.value+17.8- 44.6];
    }
  }
  return [0, 0,]
}

// 修改时间格式化方法
const forMatTim = (seconds) => {
  const minutes = seconds / 60
  if (minutes > 4.5) {
    // 超过4.5分钟显示实际分钟数
    return Math.round(minutes)
  }
  // 否则保留一位小数
  return minutes.toFixed(1)
}
</script>
<style lang="scss" scoped>
.echartsBox {
  display: flex;
  justify-content: center;

  .ecahrts-left {
    margin: 40px 0px;
    width: 601px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .left-item {
    height: 34px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0%;
    text-align: right;
    display: flex;
    align-items: center;
    position: relative;

    &::before {
      content: '';
      display: block;
      position: absolute;
      // width:1
      height: 1px;
      right: 0px;
      left: 34px;
      background-color: #CCCCCC;
    }

    &.more {
      &::before {
        content: "";
        position: absolute;
        display: block;
        height: 2px;
        background-color: #999999;
      }
    }

    .v-l {
      color: #333;
      // width: 20px;
      text-align: left;
      // margin-right: 10px;
    }

    .v-middler {
      width: 601px;
      height: 1px;
      background-color: #CCCCCC;
    }

  }
}

.y-X {
  display: flex;
  align-items: center;
  margin-left: 30px;
  justify-content: space-between;
  transform: translateY(-18.5px);
  padding: 0px 10px;

  .v-infos {

    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .v-info-v {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 2px;
    // position:absolute;
  }

  .v-dash {
    height: 95px;
    border-left: 1px dashed #CCCCCC;

  }

  .default-label {
    color: #333;
    font-size: 12px;

    &.notEmpty {
      margin-top: 21px;
    }
  }

  .X-item-infos {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

.X-status-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0px;
  // top:-53px;

}

.y-X-item {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.X-status-Block {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0px;
}

.v-model {
  width: 16px;
  height: 8px;
}

.v-value {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0%;
  text-align: center;
  color: #000;
}

.X-box {
  display: flex;
  margin-left: 34px;
  justify-content: space-between;
  align-items: center;

  .item-ingress,.item-ingress-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
  

    .item-value {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      line-height: 19.6px;
      letter-spacing: 0%;
      text-align: center;
      color: #000;
    }

    .item-progess {
      width: 16px;
      height: 8px;


      img {
        width: 100%;
      }
    }
  }
}
.projess-value,.projess-value-height,.projess-value-height-c{
      width:1px;
      border-left: 1px dashed #CCCCCC;
      position:absolute;
      // top:49.6px;
      top:47.6px;
    
}
.projess-value-height{
      width:1px;
      border-left: 1px dashed #CCCCCC;
      position:absolute;
      // top:49.6px;
      top:40.6px;
    
}
.projess-value-height-c{
  top:40px !important;
  flex-direction: column;
  align-items: center;
  display:flex;
  position:static;
}
/**
 position: absolute;
     
*/
.X-box-item{
  display:flex;
  flex-direction: column;
  align-items: center
}
.v-avaf{
  width:4px;
  height:6px;
  background-color:#000;
  position:absolute;
  bottom:40px;
  .v-lable{
    position: absolute;
    right:-100px;
    top:50%;
    transform:translateY(-50%);
  }
}
</style>